<template>
  <div class="_wz_cent_main _wz_logCheckItems">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <Form :model="formDataSearch" label-position="right" :label-width="80" inline>
        <FormItem label="运输企业" >
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable >
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="排查类型">
          <i-select v-model="formDataSearch.checkType" filterable placeholder="排查类型" clearable>
            <Option value="1">行车前</Option>
            <Option value="2">行车中</Option>
            <Option value="3">行车后</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>

    <Card :bordered="true" style="height: 100%;overflow: hidden;">
      <p slot="title">列表</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>
    <Drawer width="40%" v-model="formOperation" class="_wz_car_viewData" :title="formTitle" :draggable="true" :mask-closable="false" :styles="formOperationStyles">
      <Form label-position="right" :model="formData" ref="formAdd" :label-width="100" v-if="formOperation" :rules="ruleValidate">
        <FormItem label="运输企业" prop="deptUuid">
          <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable :label-in-value="true" @on-change="public.selectName($event,formData,'deptName')"   >
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="检查项类型" prop="checkType">
          <i-select v-model.number="formData.checkType" filterable placeholder="请选择检查项类型" clearable>
            <Option :value="1">行车前</Option>
            <Option :value="2">行车中</Option>
            <Option :value="3">行车后</Option>
          </i-select>
        </FormItem>
        <FormItem label="检查项名称" prop="checkName">
          <i-input v-model="formData.checkName" placeholder="请填写检查项名称" clearable />
        </FormItem>
        <FormItem label="检查项说明" prop="checkValue">
          <i-input v-model="formData.checkValue" type="textarea" placeholder="请填写检查项说明" :autosize="{minRows: 5,maxRows: 5}" />
        </FormItem>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="formOperation = false">取消</Button>
          <Button type="primary" @click="authSubmit('formAdd')">提交</Button>
        </div>
      </Form>
    </Drawer>

  </div>
</template>
<script>
import wzTbale from "../../../components/table/table";

export default {
  components: {
    wzTbale,//列表
  },
  data: function () {
    return {
      ruleValidate: {
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'},
        ],
        checkName: [
          {required: true, message: '请填写检查项名称', trigger: 'blur'},
        ],
        checkType: [
          {type: 'number', required: true, message: '请选择检查项类型', trigger: 'blur'},
        ],
        checkValue: [
          {required: true, message: '请填写检查项说明', trigger: 'blur'},
        ],
      },
      formData: {},
      formDataSearch: {},
      subDeptList: [],//运输企业
      formOperation: false,
      formTitle: "",
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        padding: '10px',
        position: 'static'
      },
      tableData: {
        url: this.apiUrl.webApi + "/safety/drivingLog/drivingLogCheckPageList",//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: 'auto',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '检查项名称', width: 200, key: 'checkName'},
          {
            title: '检查项类型', key: 'checkType', width: 140,
            render: (h, params) => {
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: params.row.checkType === 1 ? 'primary' : params.row.checkType === 2 ? 'success' : "error"
                }
              }, params.row.checkType === 1 ? '行车前' : params.row.checkType === 2 ? '行车中' : "行车后");
            }
          },
          {title: '检查项说明', minWidth: 200, key: 'checkValue'},
          {title: '运输企业', width: 220, key: 'deptName'},
          {title: '创建时间', width: 160, key: 'createTime'},
          {
            title: '操作', fixed: 'right', width: 120,
            render: (h, params) => {
              let operationButtons = [];
              operationButtons.push(h('span', {
                style: {"color": "#2d8cf0", "cursor": "pointer"},
                on: {
                  click: () => {
                    this.formTitle = '修改';
                    this.formData = JSON.parse(JSON.stringify(params.row));
                    this.formOperation = true;
                  }
                }
              }, '修改'))

              operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))

              operationButtons.push(h('span', {
                style: {"color": "#2d8cf0", "cursor": "pointer"},
                on: {
                  click: () => {
                    var that = this;
                    that.$Modal.confirm({
                      title: '删除提醒',
                      content: '确定要删除选中的数据？',
                      onOk: () => {
                        that.tableLoading = true;//加载
                        that.axios.post(that.apiUrl.webApi + "/safety/drivingLog/drivingLogCheckDelete", {uuid: params.row.uuid}).then(res => {
                          that.tableLoading = false;//加载
                          if (!!res) {
                            that.$Message.success('删除成功');
                            that.$refs.wzTbale.tableLoadData();
                          }
                        }).catch(err => {
                          console.log('失败', err);
                        })
                      },
                      onCancel: () => {
                      }
                    });
                  }
                }
              }, '删除'))
              return operationButtons;
            }
          }
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      }
    }
  },
  beforeCreate() {//beforeCreate创建前状态
  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程
  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })
  },
  methods: {//执行的方法
    //试卷添加
    addTableData() {
      let that = this;
      that.formTitle = "添加";
      that.formData = {
        deptUuid : that.subDeptList[0].uuid,
        deptName : that.subDeptList[0].deptName,
      }
      that.formOperation = true;
    },
    authSubmit(name) {
      var that = this
      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用
          that.axios.post(that.apiUrl.webApi + "/safety/drivingLog/drivingLogCheckSaveOrUpdate", this.formData).then(res => {
            that.$Spin.hide()
            if (!!res) {
              that.$refs.wzTbale.tableLoadData();
              that.$Message.success('保存成功');
              that.formOperation = false;
              that.formData = {}
            }
          }).catch(err => {
            console.log("失败", err)
          })
        } else {
          this.$Message.error('请正确填写表单')
        }
      })
    },
    searchSubmit() {
      this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch))
      this.$refs.wzTbale.tableLoadData(true)
    }
  },
  watch: {//监听
  },
  props: {//接收来自父组件的数据
  },
  beforeUpdate() {//beforeUpdate 更新前状态
  },
  updated() {//updated 更新完成状态
  },
  beforeDestroy() {//beforeDestroy 销毁前状态
  },
  destroyed() {//destroyed 销毁完成状态
  }
}
</script>

<style lang="less">
._wz_logCheckItems {
  //不固定头部  列表到底
  display: flex;
  flex-direction: column;
}
</style>


